<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>影厅</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<!-- 搜索栏信息 -->

<div class="demoTable" style="margin-top:30px;margin-left:20px">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select name="quiz2"  id="pid" >
                    <c:forEach  items="${ sessionScope.pd}" var="p">
                    <option value="${p.cname}">${p.cname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
</div>

<div id="addemployee" style="display: none">
    <!-- 这里给一个弹出表单 -->
    <form class="layui-form" lay-filter="example">
        <br>
        <br>
        <div class="demoTable">
            <label class="layui-form-label">影厅名</label>
            <div class="layui-inline">
                <input class="layui-input" name="cname" id="addcinema"
                       autocomplete="off" placeholder="请输入影厅">
            </div>
            <button class="layui-btn btn-update" type="button" lay-submit="" lay-filter="demo1">增加</button>
        </div>

    </form>

</div>

<!-- 编辑信息 -->
<div id="editemployee" style="display:none">
    <form class="layui-form" lay-filter="example">
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">影厅名</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" id="cname"  autocomplete="off"
                       class="layui-input" readonly="true">
            </div>
        </div>
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">电影名</label>
            <div class="layui-input-inline">
                <select name="mid"  id="editmname" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <c:forEach  items="${ sessionScope.pdmovie}" var="p">
                        <option value="${p.mid}">${p.mname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <br>
        <br>

        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="mstartime" id="test5"  placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">价  格</label>
            <div class="layui-input-inline">
                <input type="text" name="mprice" id="mprice"
                       autocomplete="off" class="layui-input" placeholder="请输入价格">
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">影厅Id</label>
            <div class="layui-input-block">
                <input type="text" name="cid" id="cid" lay-verify="title"
                       autocomplete="off" placeholder="请输入"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn btn-update" type="button" lay-submit=""
                        lay-filter="demo2">修改
                </button>
            </div>
        </div>
    </form>
</div>
<!-- 排片信息 -->
<div id="playmovie" style="display:none">
    <form class="layui-form" lay-filter="example">
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">影厅名</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" id="playcname" value=""  autocomplete="off"
                       class="layui-input" readonly="true">
            </div>
        </div>
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">电影名</label>
            <div class="layui-input-inline">
                <select name="mid" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <c:forEach  items="${ sessionScope.pdmovie}" var="p">
                        <option value="${p.mid}">${p.mname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <br>
        <br>

        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="mstartime" id="test51"  placeholder="MM-dd HH:mm:ss">
            </div>
        </div>
        <br>
        <br>
        <div class="layui-inline">
            <label class="layui-form-label">价  格</label>
            <div class="layui-input-inline">
                <input type="text" name="mprice" id="mprice1"
                       autocomplete="off" class="layui-input" placeholder="请输入价格">
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn btn-update" type="button" lay-submit=""
                        lay-filter="demo3">排片
                </button>
            </div>
        </div>
    </form>
</div>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="addcinema">添加影厅</button>
        <button class="layui-btn layui-btn-sm" lay-event="playmovie">排片</button>

    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" style="background-color: #FF5722"  lay-event="del">删除</a>
</script>

<script src="layuiadmin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
            ,min: 0
            ,max: 7
        });
        laydate.render({
            elem: '#test51'
            ,type: 'datetime'
            ,min:0
            ,max: 7
        });
    });
    //遍历所有信息
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: 'mcs/mcslist',
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            cols: [[{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'cname',
                title: '影厅名',
                align: 'center',
                width: 200
            }, {
                field: 'mprice',
                title: '票价',
                align: 'center',
                width: 140
            }, {
                field: 'mstartime',
                width: 210,
                align: 'center',
                title: '开场时间',
                templet: "<div>{{layui.util.toDateString(d.mstartime, 'yyyy-MM-dd HH:mm')}}</div>"
            }, {
                field: 'mendtime',
                title: '结束时间',
                align: 'center',
                width: 210,
                templet: "<div>{{layui.util.toDateString(d.mendtime, 'yyyy-MM-dd HH:mm')}}</div>"
            },{
                field: 'mname',
                title: '影片',
                align: 'center',
                width: 160
            },{
                fixed: 'right',
                title: '操作',
                toolbar: '#barDemo',
                align: 'center',
                width: 220
            }]],
            page: true,
            id: 'testReload'
        });

        //表格数据重载，模糊查询
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        //这里传值给servlet
                        content: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        $("#pid").change(function(){
            var opt=$("#pid").val();
           // console.log(opt);
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1
                    //重新从第 1 页开始
                },
                where: {
                    //这里传值给servlet
                    content: opt
                }
            });

        });
        //头工具栏事件 ,做添加操作
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addcinema':
                    var data = checkStatus.data;
                    layer.open({
                        type: 1,
                        content: $("#addemployee"),//这里弹出的内容是div的id为addemployee
                        title: '添加影厅信息',
                        area: ['370px', '170px']
                    });
                    break;
                case 'playmovie':
                    var opt=$("#pid").val();
                    $("#playcname").attr("value", opt);
                    var index1 = layer.open({
                        type: 1,
                        content: $("#playmovie"),
                        title: '排片',
                        area: ['370px', '400px']
                    });
                    break;
            }
            ;
        });

        //ajax添加提交事件,  此处搭配添加操作弹出层
        layui.form.on('submit(demo1)', function (data) {
            var str=document.getElementById('addcinema').value;
            reg = /^[\u4e00-\u9fa5]{0,}$/;
            var re = new RegExp(reg);
            console.log(JSON.stringify(data.field));
            if(str==""){
                layer.msg('不能为空', {icon: 5});
            }else if(!re.test(str)){
                layer.msg('只能是中文格式', {icon: 5});
            }else{
            $.ajax({
                type: "post",
                url: "cinema/addcinema",
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (cm) {
                    layer.msg(cm.msg, {
                        time: 1000,
                    }, function () {
                        if (cm.msg == "添加成功") {
                            layer.closeAll();
                            location.reload('testReload');

                        }
                    });

                }

            });

            }
            //return false;
        });
        //ajax添加提交事件,  此处搭配添加操作弹出层
        layui.form.on('submit(demo3)', function (data) {
            var   d=new   Date(Date.parse(data.field.mstartime .replace(/-/g,"/")));
            var   curDate=new   Date();
            if(data.field.mstartime==""){
                layer.msg('时间不能为空', {icon: 5});
            }else if(d<=curDate){
                layer.msg('时间早于当前时间', {icon: 5});

            }else if(data.field.mprice==""){
                layer.msg('价格不能为空', {icon: 5});

            }else{
            $.ajax({
                type: "post",
                url: "mcs/addcinema",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (cm) {
                    layer.msg(cm.msg, {
                        time: 1000,
                    }, function () {
                        if (cm.msg == "添加成功") {
                            layer.closeAll();
                            var opt=$("#pid").val();
                            table.reload('testReload', {
                                page: {
                                    curr: 1
                                    //重新从第 1 页开始
                                },
                                where: {
                                    //这里传值给servlet
                                    content: opt
                                }
                            });
                        }
                    });

                }

            });

            }
            //return false;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
				//console.log(data)
            if (obj.event === 'del') {
                layer.confirm('真的删除吗？', function(index) {
                    $.ajax({
                        'type' : 'delete',
                        'url' : 'cinema/delcinema/' + data.cid,
                        'success' : function(cm) {
                            layer.msg(cm.msg, {
                                time : 1500
                            }, function() {
                                if (cm.msg == "删除成功") {
                                    layer.closeAll();
                                    table.reload('testReload');//重新加载列表
                                }else {
                                    layer.msg("删除失败");
                                }
                            })
                        }
                    });
                })
            } else if (obj.event === 'edit') {

                //给表单元素赋值editmname
                $("#cname").attr("value", data.cname);
                $("#cid").attr("value", data.cid);
                $("#mprice").attr("value", data.mprice);
                $("#editmname").val(data.mid);
                $("#test5").prop("value", layui.util.toDateString(data.mstartime, 'yyyy-MM-dd HH:mm:ss'));

                //添加一个弹出层
                var index1 = layer.open({
                    type: 1,
                    content: $("#editemployee"),
                    title: '修改影厅信息',
                    area: ['370px', '400px']


                });

                layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
            }
        });

        //ajax修改提交,  此处搭配监听行工具事件  的修改操作
        layui.form.on('submit(demo2)', function (data) {
            //这里输出看下json对象
            // console.log(JSON.stringify(data.field));
            var d = new Date(Date.parse(data.field.mstartime.replace(/-/g, "/")));
            var curDate = new Date();
            if (data.field.mstartime == "") {
                layer.msg('时间不能为空', {icon: 5});
            } else if (d <= curDate) {
                layer.msg('时间早于当前时间', {icon: 5});

            } else if (data.field.mprice == "") {
                layer.msg('价格不能为空', {icon: 5});

            } else {
            $.ajax({
                type: "put",
                url: "mcs/updatecinema",
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (cm) {
                    layer.msg(cm.msg, {
                        time: 1000,
                    }, function () {
                        if (cm.msg == "修改成功") {

                            layer.closeAll();
                            var opt=$("#pid").val();
                            table.reload('testReload', {
                                page: {
                                    curr: 1
                                    //重新从第 1 页开始
                                },
                                where: {
                                    //这里传值给servlet
                                    content: opt
                                }
                            });


                        }
                    });
                }

            });
        }

            return false;
        });


    });

</script>

</body>
</html>